<template>
  <div class="s-box">
    <!-- 导航 -->
    <van-nav-bar title="NFT卡牌空间" left-text="" class="space-nav" :border="false" :fixed="true" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="bars" size="22" color="#a6cef9" @click="toggleSpaceNavMore" />
      </template>
    </van-nav-bar>

    <!-- 导航菜单 -->
    <div class="space-nav__more" v-if="spaceNavMore">
      <div class="container">
        <div class="row" v-for="item in navRoutes" :key="item.id">
          <div class="col">
            <router-link :to="item.path" class="text-decoration-none text-main">
              <div class="d-flex justify-content-between align-items-center py-2">
                <div class="ms-2">{{ item.name }}</div>
                <img src="../assets/img/arrow-right.png" style="height: 1em" class="me-2" alt="" />
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>

    <!-- 正文 -->
    <div class="s-box-start nav-top pb-5 pt-3">
      <!-- 搜索 -->
      <form action="/">
        <van-search shape="round" v-model="value" placeholder="请输入名称/作者/编号" background="transparent" @search="onSearch" @cancel="onCancel" />
      </form>

      <van-config-provider :theme-vars="themeVarsOption">
        <van-dropdown-menu active-color="#1131df" :border="false">
          <van-dropdown-item v-model="statusValue" :options="statusOption" @change="onStatusChange" />
          <van-dropdown-item v-model="orderValue" :options="orderOption" @change="onOrderChange" />
        </van-dropdown-menu>
      </van-config-provider>
      <!-- 筛选 -->
      <!-- <div class="d-flex justify-content-between py-3">
        <div class="w-50 d-flex">
          <div class="mx-2 d-flex align-items-center">
            <span class="border-bottom border-2">最新</span>
          </div>
          <div class="mx-2 d-flex align-items-center">
            <span>价格</span>
          </div>
          <div class="mx-2 d-flex align-items-center">
            <span>换手</span>
          </div>
        </div>
        <div class="w-50 d-flex justify-content-end align-items-center">
          <div class="d-flex align-items-center mx-2">筛选</div>
          <div class="mx-3 d-flex align-items-center">
            <img src="../assets/img/s1.png" alt="" style="height: 1em" />
          </div>
        </div>
      </div> -->

      <!-- 列表 -->
      <van-config-provider :theme-vars="themeVars">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list :loading="loading" :finished="finished" finished-text="" @load="onLoad" @offset="10">
            <van-grid :gutter="5" :column-num="2" :border="false">
              <van-grid-item v-for="(item, index) in listItems" :key="index">
                <div class="su-product" @click="toDetail(item.id)">
                  <div class="img">
                    <img :src="item.cardPath" class="img-fluid w-100" style="height:10em" alt="" />
                    <div class="status fs-7" :class="$statusFilters.cls(item.status)">
                      {{ $statusFilters.name(item.status)}}
                    </div>
                  </div>
                  <div class="mt-2 px-2 fs-7 van-multi-ellipsis--l2" style="height: 3.2em;">
                    {{ item.cardName }}
                  </div>
                  <div class="text-start d-block w-100 my-1 px-2 fs-7">
                    ￥{{ item.sellPrice || '-'}}
                  </div>
                </div>
              </van-grid-item>
            </van-grid>
          </van-list>
        </van-pull-refresh>
      </van-config-provider>
    </div>
  </div>
</template>

<script lang="ts">
import { apis, postRequest } from '@/common/ts/request'
import { Toast } from 'vant'
import { onMounted, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    const value = ref('')
    const themeVars = {
      gridItemContentBackgroundColor: 'transparent',
      gridItemContentPadding: '.25em .25em',
    }

    const themeVarsOption = {
      dropdownMenuBackgroundColor: '#020a1e',
      dropdownMenuTitleActiveTextColor: '#1131df',
      dropdownMenuOptionActiveColor: '#1131df',
      cellBackgroundColor: '#020a1e',
      cellBorderColor: 'transparent',
    }

    const state = reactive({
      spaceNavMore: false,
      navRoutes: [
        { path: '/nft', name: 'NFT主题', id: 1 },
        { path: '/nfts', name: 'NFTS', id: 2 },
        { path: '/transaction', name: '交易明细', id: 4 },
      ],
      loading: false,
      finished: false,
      refreshing: false,
      listItems: [],
      page: 1,
      pages: 0,
      keyword: '',
      statusValue: -1,
      orderValue: 1,
      statusOption: [
        { text: '售卖种类', value: -1 },
        { text: '准备中', value: 0 },
        { text: '售卖中', value: 1 },
        { text: '发行结束', value: 2 },
      ],

      orderOption: [
        { text: '最新', value: 1 },
        { text: '价格低到高', value: 2 },
        { text: '价格高到低', value: 3 },
        { text: '换手高到低', value: 4 },
      ],
      isAppend: false,
    })

    const loadData = async () => {
      const { data } = await postRequest(apis.cardList, {
        current: state.page,
        size: 10,
        name: state.keyword,
        sort: state.orderValue,
        type: state.statusValue >= 0 ? state.statusValue : '',
      })

      if (state.page == data.current && !state.isAppend) {
        state.isAppend = true
        state.listItems = state.listItems.concat(data.list)
      }
      state.pages = data.pages
      state.loading = false
      if (state.page >= state.pages) {
        state.finished = true
      }
    }

    const onLoad = () => {
      if (!state.refreshing && state.page < state.pages) {
        console.log(state.page)
        console.log(state.pages)
        state.page = state.page + 1
        state.isAppend = false
      }

      if (state.refreshing) {
        state.listItems = []
        state.refreshing = false
      }
      loadData()
    }
    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      state.page = 1
      state.isAppend = false
      onLoad()
    }

    onMounted(async () => {
      console.log('onMounted')
    })

    const toggleSpaceNavMore = async () => {
      state.spaceNavMore = !state.spaceNavMore
    }

    const toDetail = (id: number) => {
      router.push({
        path: '/spaceDetail',
        query: { id: id },
      })
    }

    // 搜索
    const onSearch = (val: string) => {
      state.keyword = val
      console.log(val)
      onRefresh()
    }
    // 取消搜索
    const onCancel = () => {
      console.log('onCancel')
    }

    // 选择状态
    const onStatusChange = () => {
      console.log(state.statusValue)
      onRefresh()
    }
    // 选择排序
    const onOrderChange = () => {
      console.log(state.orderValue)
      onRefresh()
    }
    const onClickLeft = () => history.back()
    return {
      ...toRefs(state),
      value,
      toggleSpaceNavMore,
      themeVars,
      themeVarsOption,
      onLoad,
      onRefresh,
      onSearch,
      onCancel,
      toDetail,
      onStatusChange,
      onOrderChange,
      onClickLeft,
    }
  },
}
</script>

<style lang="scss" scoped>
.su-product {
  border-radius: 0.5em;
  background: transparent url('../assets/img/bg1x.png');
  .img {
    position: relative;
    img {
      border-top-left-radius: 0.5em;
      border-top-right-radius: 0.5em;
    }
    .status {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0.2em 0.4em;
      border-top-left-radius: 0.5em;
      border-bottom-right-radius: 0.5em;
    }
  }
}
</style>
